<template>
  <el-card style="width: 80%; margin: 0 auto">
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 成交基础信息 -->
      <el-tab-pane label="审核信息" name="base">
        <TcFormDetail
          v-if="open && approveType == 'transaction'"
          :key="tcFormDetail?.id"
          :msgData="tcFormDetail"
        />
        <RefundDetail
          v-if="open && approveType == 'refundOrder'"
          :key="tcFormDetail?.id"
          :msgData="tcFormDetail"
        />
        <newspaperDetails
          v-if="open && approveType == 'completed'"
          :key="tcFormDetail?.id"
          :msgData="tcFormDetail"
        ></newspaperDetails>
        <invoiceDetail
          v-if="open && approveType == 'invoice'"
          :key="tcFormDetail?.id"
          :msgData="tcFormDetail"
        ></invoiceDetail>
      </el-tab-pane>

      <!-- 成交分成信息 -->
      <el-tab-pane label="流转记录" name="divide">
        <SendProcess v-if="open" :key="process?.id" :processData="process" />
      </el-tab-pane>
    </el-tabs>

    <!-- 操作按钮 -->
    <!-- <div class="actions">
      <el-button :loading="subLoad" type="primary" @click="submit"
        >保存</el-button
      >
    </div> -->
  </el-card>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { transactionConfirm } from "@/api/business/tcForm";
import { querySending } from "@/api/task/sending";
import { queryRefund } from "@/api/business/refund";
import { queryNewspaperDetail } from "@/api/dailyNewspaper/addDetails";
import { getinvoiceDetail } from "@/api/task/todo";
import TcFormDetail from "@/views/business/tcForm/components/TcFormDetail.vue";
import RefundDetail from "@/views/business/refund/components/refundDetail.vue";
import SendProcess from "@/views/task/components/SendProcess.vue";
import newspaperDetails from "../../dailyNewspaper/addDetails/components/newspaperDetails.vue";
import invoiceDetail from "@/views/task/components/invoiceDetail.vue";

const route = useRoute();
// 当前激活 tab
const activeTab = ref("base");
const tcFormDetail = ref({});
const open = ref(false);
function getSendDetail() {
  const id = route.query.operationId;
  transactionConfirm(id).then((res) => {
    console.log(res.data);
    tcFormDetail.value = res.data;
    open.value = true;
  });
}
const process = ref({});
function sendProcess() {
  const id = route.query.id;
  querySending(id).then((res) => {
    process.value = res.data;
  });
}
function getRefundDetail() {
  const id = route.query.operationId;
  queryRefund(id).then((response) => {
    tcFormDetail.value = response.data;
    open.value = true;
  });
}
function getNewsPaperDetail() {
  const id = route.query.operationId;
  queryNewspaperDetail(id).then((response) => {
    tcFormDetail.value = response.data;
    open.value = true;
  });
}
// 获取发票详情
function getInvoiceDetail() {
  const id = route.query.operationId;
  getinvoiceDetail(id).then((response) => {
    tcFormDetail.value = response.data;
    open.value = true;
  });
}
const approveType = ref(route.query.approveType);
onMounted(() => {
  if (approveType.value == "transaction") {
    //成交确认单
    getSendDetail();
  } else if (approveType.value == "refundOrder") {
    //退款订单
    getRefundDetail();
  } else if (approveType.value == "completed") {
    getNewsPaperDetail();
  } else if (approveType.value == "invoice") {
    getInvoiceDetail();
  }
  sendProcess();
});
</script>

<style scoped>
.actions {
  text-align: right;
  margin-top: 20px;
}
</style>
